<template>
	<view class="">
		<view  class="example">
			<view class="tip">v-if v-else 测试案例</view>
			<view class="main">
				<view v-if="shop">京东</view>		
				<view v-else>淘宝网</view>
			</view>
		</view>
		
		<view  class="example">
            <view class="tip">v-if  v-else-if v-else 测试案例</view>
			<view class="main">
				<view v-if="day===1">星期1</view>		
				<view v-else-if="day === 2">星期2</view>		
				<view v-else-if="day === 3">星期3</view>		
				<view v-else-if="day === 4">星期4</view>
				<view v-else-if="day === 5">星期5</view>
				<view v-else-if="day === 6">星期6</view>
				<view v-else-if="day === 7">周末</view>
				<view v-else>格式错误</view>
			</view>
		</view>
		
        <view  class="example">
			 <view class="tip">v-if 和 v-show 区别</view>
			 <view class="main">
				<view class="box1" v-if="true">
					<image src="../../static/pic1.png" mode=""></image>
				</view>

				<view class="box2" v-show="false">
					<image src="../../static/pic2.png" mode=""></image>
				</view>
			 </view>
		</view>
		
        <view class="example">
			 <view class="tip">template的使用</view>
            <view class="main">
				<template v-if="true">
					<image src="../../static/logo.png" mode=""></image>
					<view>logo</view>
				</template>
				
				<template v-else>
					<image src="../../static/pic4.jpg" mode=""></image>
					<view>pic4</view>
				</template>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import {ref} from "vue";
const shop = ref(true);
const day = ref(30);
</script>

<style lang="scss" scoped>
.example{
  border: 1px solid rgb(172, 167, 167);
  border-radius: 5px;
  margin: 15px 10px;
  padding: 10px;
  text-align: center;

  .tip{
	color: gray;
	font-style: italic;
	line-height: 2;
  }

  .main{
	background: lightgreen;
	padding: 10px 0;
	border-radius: 5px;
  }
}
</style>
